<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>foster_family_details</title>
<link href="${pageContext.request.contextPath}/frontdevel/css/style1.css" rel='stylesheet' type='text/css' />
<jsp:include page="header.jsp"></jsp:include>
<style type="text/css">
.layui-form-label {
    float: left;
    display: block;
    padding: 9px 15px;
    width: 86px;
    font-weight: 400;
    line-height: 20px;
    text-align: right;
}
</style>
</head>
<body>
	<!--start-home-->
	<div id="home" class="header">
		<!-- 顶部导航栏 -->
		<jsp:include page="topbar.jsp"></jsp:include>
		<!-- 顶部导航栏结束 -->

		<div class="banner">
			<div class="container">
				<ul id="flexiselDemo3">
					<li>
						<div class="biseller-column">
							<a class="lightbox" href="#goofy"> <img src="images/s1.jpg" />
							</a>
							<div class="lightbox-target" id="goofy">
								<img src="images/s1.jpg" /> <a class="lightbox-close" href="#">
								</a>

								<div class="clearfix"></div>
							</div>
						</div>
					</li>
					<li>
						<div class="biseller-column">
							<a class="lightbox" href="#goofy"> <img src="images/s4.jpg" />
							</a>
							<div class="lightbox-target" id="goofy">
								<img src="images/s4.jpg" /> <a class="lightbox-close" href="#">
								</a>

								<div class="clearfix"></div>
							</div>
						</div>
					</li>
					<li>
						<div class="biseller-column">
							<a class="lightbox" href="#goofy"> <img src="images/s3.jpg" />
							</a>
							<div class="lightbox-target" id="goofy">
								<img src="images/s3.jpg" /> <a class="lightbox-close" href="#">
								</a>

								<div class="clearfix"></div>
							</div>
						</div>
					</li>
					<li>
						<div class="biseller-column">
							<a class="lightbox" href="#goofy"> <img src="images/s1.jpg" />
							</a>
							<div class="lightbox-target" id="goofy">
								<img src="images/s1.jpg" /> <a class="lightbox-close" href="#">
								</a>

								<div class="clearfix"></div>
							</div>
						</div>
					</li>
					<li>
						<div class="biseller-column">
							<a class="lightbox" href="#goofy"> <img src="images/s4.jpg" />
							</a>
							<div class="lightbox-target" id="goofy">
								<img src="images/s4.jpg" /> <a class="lightbox-close" href="#">
								</a>

								<div class="clearfix"></div>
							</div>
						</div>
					</li>
					<li>
						<div class="biseller-column">
							<a class="lightbox" href="#goofy"> <img src="images/s1.jpg" />
							</a>
							<div class="lightbox-target" id="goofy">
								<img src="images/s1.jpg" /> <a class="lightbox-close" href="#">
								</a>

								<div class="clearfix"></div>
							</div>
						</div>
					</li>
					<li>
						<div class="biseller-column">
							<a class="lightbox" href="#goofy"> <img src="images/s4.jpg" />
							</a>
							<div class="lightbox-target" id="goofy">
								<img src="images/s4.jpg" /> <a class="lightbox-close" href="#">
								</a>

								<div class="clearfix"></div>
							</div>
						</div>
					</li>
				</ul>
			</div>

			<script type="text/javascript">
				$(window).load(function() {
					$("#flexiselDemo3").flexisel({
						visibleItems : 3,
						animationSpeed : 1000,
						autoPlay : true,
						autoPlaySpeed : 3000,
						pauseOnHover : true,
						enableResponsiveBreakpoints : true,
						responsiveBreakpoints : {
							portrait : {
								changePoint : 480,
								visibleItems : 3
							},
							landscape : {
								changePoint : 640,
								visibleItems : 3
							},
							tablet : {
								changePoint : 768,
								visibleItems : 3
							}
						}
					});

				});
			</script>
			<script type="text/javascript" src="${pageContext.request.contextPath}/frontdevel/js/jquery.flexisel.js"></script>
		</div>
	</div>
	<!-- 添加按钮弹出层 -->
			<div class="layui-row" id="addorder" style="display: none;">
				<div class="layui-col-md11">
					<form class="layui-form" id='myform'  >
						<div class="layui-form-item" style="display: none">
							<input type="text" name="oid" class="layui-input" id="oid">
						</div>
						<div class="layui-form-item" style="display: none">
							<input type="text" name="ouid" class="layui-input" id="ouid"
								value=5>
						</div>
						<div class="layui-form-item" style="display: none">
							<input type="text" name="ofuname" class="layui-input"
								value=${user.uname} id="ofuname">
						</div>
						<div class="layui-form-item" style="display: none">
							<input type="text" name="otuname" class="layui-input"
								id="otuname" value=${param.name}>
						</div>
						<div class="layui-form-item">
							<label class="layui-form-label">宠物名</label>
							<div class="layui-input-inline">
								<input type="text" name="opetname" class="layui-input"
									id="opetname">
							</div>
						</div>
						<div class="layui-form-item">
							<label class="layui-form-label">宠物类型</label>
							<div class="layui-input-inline">
								<select name="opettype" id="opettype" lay-verify="required">
								<option value="0">dog</option>
								<option value="1">cat</option>
								<option value="2">Other pets</option>
							</select>
							</div>
						</div>
						
						<div class="layui-form-item">
						<label class="layui-form-label">Pet_status</label>
						<div class="layui-input-block">
							<select name="opetstatus" lay-verify="required" id="opetstatus">
								<option value="1">In good condition</option>
								<option value="0">ill</option>

							</select>
						</div>
					</div>
						
						<div class="layui-form-item">
							<label class="layui-form-label">下单日期</label>
							<div class="layui-input-inline">
								<input type="text" class="layui-input" id="ostdate"
									name="ostdate" placeholder="yyyy-MM-dd HH:mm:ss" readonly>
							</div>
						</div>

						<div class="layui-form-item" style="display: none">
							<input type="text" name="odays" class="layui-input" id="odays">
						</div>

						<div class="layui-form-item">
							<label class="layui-form-label">结束日期</label>
							<div class="layui-input-inline">
								<input type="text" class="layui-input" id="oenddate"
									name="oenddate" placeholder="yyyy-MM-dd HH:mm:ss" readonly>
							</div>
						</div>

						<div class="layui-form-item" style="display: none">
							<input type="text" name="odeposit" class="layui-input"
								id="odeposit">
						</div>
						<div class="layui-form-item" style="display: none">
							<input type="text" name="ototal" class="layui-input" id="ototal">
						</div>
						<div class="layui-form-item" style="display: none">
							<input type="text" name="ofinapay" class="layui-input"
								id="ofinapay">
						</div>

						<div class="layui-form-item" style="display: none">
							<label class="layui-form-label">订单状态</label>
							<div class="layui-input-block">
								<input type="radio" name="ostatus" value="0" title="已交押金" checked>
								<input type="radio" name="ostatus" value="1" title="已完成">
							</div>
						</div>

						<div class="layui-form-item">
							<div class="layui-input-block">
								<input value="提交" id="subbtn" type="button"
									class="layui-btn layui-btn-normal">
							</div>
						</div>
					</form>
				</div>
			</div>
			<!-- 添加按钮弹出层 -->
	<!-- foster_family -->
	<div id="news" class="w3ls-section services news">
		<div class="container">
			<h3 class="agileits-title">FosterFamilyDetails</h3>
			<div class="news-agileinfo">
				<div class="col-sm-4 news-w3lgrids">
					<div class="news-gridtext">
						<div class="news-w3img">
							<img src="/ima/${param.url}" class="img-responsive zoom-img" alt="" />
						</div>
						<div class="news-w3imgtext">
							<h5 class="w3-agilep">地址:${param.add}</h5>
							<h4>${param.name}</h4>
							<p>类型:${param.type}</p>
						</div>
					</div>
				</div>

				<div class="col-sm-8 news-w3lgrids">
					<div class="news-gridtext">
						<div class="news-w3imgtext">
						<h5 class="w3-agilep">服务细则</h5>
							<p class="service">${param.content}</p>
				
						</div>
					</div>
					<input value="预约寄养" type="button" id="fosterapp" class="layui-btn layui-btn-normal">
				</div>


			</div>
		</div>
	</div>

	<!-- //foster_family -->
	<!--swipebox -->
	<link rel="stylesheet" href="${pageContext.request.contextPath}/frontdevel/css/swipebox.css">
	<script src="${pageContext.request.contextPath}/frontdevel/js/jquery.swipebox.min.js"></script>
	<script type="text/javascript">
		jQuery(function($) {
			$(".swipebox").swipebox();
		});
	</script>



	<!-- footer开始 -->
	<jsp:include page="footer.jsp"></jsp:include>
	<!-- footer结束 ---wwb -->
	<!--start-smoth-scrolling-->
	<script type="text/javascript">
		jQuery(document).ready(function($) {
			$(".scroll").click(function(event) {
				event.preventDefault();
				$('html,body').animate({
					scrollTop : $(this.hash).offset().top
				}, 1000);
			});
		});
	</script>
	<script type="text/javascript">
		layui.use([ 'table', 'laydate' ], function() {
			var table = layui.table;
			var form = layui.form;
			var laydate = layui.laydate;
			laydate.render({
				elem : '#ostdate',
				type : 'datetime',
				min:getNowFormatDate()
			});
			laydate.render({
				elem : '#oenddate',
				type : 'datetime',
				min:getNowFormatDate()
			});
			function getNowFormatDate() {
				var date = new Date();
				var seperator1 = "-";
				var seperator2 = ":";
				var month = date.getMonth() + 1;
				var strDate = date.getDate();
				if (month >= 1 && month <= 9) {
					month = "0" + month;
				}
				if (strDate >= 0 && strDate <= 9) {
					strDate = "0" + strDate;
				}
				var currentdate = date.getFullYear() + seperator1 + month
						+ seperator1 + strDate + " " + date.getHours() + seperator2
						+ date.getMinutes() + seperator2 + date.getSeconds();
				return currentdate;
			}

			$("#fosterapp").click(function() {
				layer.open({
					type : 1,
					title : "预约寄养",
					skin : 'layui-layer-rim', //加上边框 */
					area : [ '500px', '500px' ], //宽高
					content : $("#addorder"),
				});
				form.render();
			});
			$(document).on('click','#subbtn', function() {
				alert("1");
				if(${!empty user}){
					alert("2");
					//  将时间转为毫秒数 通过计算获得时间差去得到预约天数  
					 var date1 = new Date($("#ostdate").val());
					var date2 = new Date($("#oenddate").val());
					var days = parseInt((date2 - date1) / (1000 * 60 * 60 * 24));
					if(days==0){
						days=1;
					}
					console.log(days); 
					//根据天数获取押金 总金额 以及结算金额
					var deposit = (days * 100) / 2;
					var finapay = (days * 100) / 2;
					var total = days * 100;
					var order = {
						'oid' : 0,
						'odays' : days,
						'ouid' : '${user.uid}',
						'ofuname' : '${user.uname}',
						'otuname' : '${param.name}',
						'opetname' : $("#opetname").val(),
						'opettype' : $("#opettype").val(),
						'ostatus' : 0,
						'opetstatus' : $("#opetstatus").val(),
						'ostdate' : $("#ostdate").val(),
						'oenddate' : $("#oenddate").val(),
						'odeposit' : deposit,
						'ofinapay' : finapay,
						'ototal' : total
					};
					// 预约寄养的表单不能为空，且预约寄养日期不能小于结束日期，成功则跳转到支付页面
					 if($("#opetname").val()!=""&&$("#ostdate").val()!=""&&$("#oenddate").val()!=""){
						 if($("#ostdate").val()>$("#oenddate").val()){
							 layer.msg("预约寄养日期不能小于结束日期",{
									time : 2000
								});
						 }else{
							 window.localStorage.setItem('order',JSON.stringify(order));
							 location.href="${pageContext.request.contextPath}/frontdevel/appliy/index.jsp";
						 }
						
					 }else{
						 layer.msg("请填写完整",{
								time : 2000
							});
					 }
				}else{
					 layer.msg("请登录",{
							time : 2000
						});
				}

			}); 

			});

	</script>
	
	<a href="#home" id="toTop" class="scroll" style="display: block;">
		<span id="toTopHover" style="opacity: 1;"> </span>
	</a>


</body>
</html>